<template>
    <div class="app-container calendar-list-container" v-loading="loading" element-loading-text="正在导出数据">
      <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-form :inline="true" :model="listQuery" ref="listQuery">
      <el-form-item >
          <el-input
              clearable
              v-model="listQuery.sectionNo"
              :style="searchInputStyle"
              class="filter-item"
              placeholder="请输入工段编号"
        ></el-input>
      </el-form-item>
      <el-form-item >
          <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      </el-form-item>
      </el-form>
    </div>
    <!-- table 表格 -->
    <el-table  :data="tableInfo" v-loading="loadingList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%">
      <el-table-column  label="序号" type="index" align="center" width="80px"/>
      <el-table-column label="责任人"  prop="userName" align="center" width="100px"/>
      <el-table-column  label="超期工单" prop='planNo' align="center"/>
      <el-table-column  label="排产数" prop='estimateYield' align="center"/>
      <el-table-column  label="完成数" prop='productionCountAll' align="center"/>
      <el-table-column  label="计划完工" prop='estimateEndTime' align="center"/>
      <el-table-column  label="超期原因" prop='cause' align="center"/>
      <el-table-column label="超时显示" prop="overdueShow" align="center">
        <template slot-scope="scope"> 
          <div class="fx">
            {{
              scope.row.overdueShow == 1
                ? '不显示':
              scope.row.overdueShow == 0
                ? "显示":''
            }}
           </div>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column fixed="right" label="操作" align="center" width="120">
        <template slot-scope="scope" >
            <el-button size="mini" type="danger" @click="hideplanNo(scope.$index,scope.row)">隐藏</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-divider></el-divider>

    <el-button style="margin-right: 10px" type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>
  </div>
</template>

<script>
import { getOverduePlanOrderList,saveShow } from '@/api/overdue.js'
export default {
    name: 'overdue',
    data() {
        return {
            tableInfo: [],
            loadingList: false,
            loading: false,
            listQuery: {
              sectionNo: '010401'
            }
        }
    },
    methods: {
    transformDat(res) {
        const mapInfo = {
            index: '序号',
            userName: '责任人',
            planNo: '超期工单',
            estimateYield: '排产数',
            productionCountAll: '完成数',
            estimateEndTime: '计划完工',
            cause: '超期原因'
        }
        // 对data进行格式化
        // 取出所有的属性名
        const props = Object.keys(res[0]) // ['id','']
        console.log(props)
        // 将属性名从英文转为中文
        const header = props.map(zhkey => mapInfo[zhkey])
        console.log('中文的表头', header)
        // const data=[['xxxx','总裁办'，'13800000']]
        const data = res.map(obj => Object.values(obj))
        console.log(data)
        return { header, data }
    },
   // 导出excel
    async hExportExcel() {
      this.loading = true
      let query = Object.assign({},this.listQuery)
      let arr = await getOverduePlanOrderList(query)
      const { header, data } = this.transformDat(this.setSort(arr.data))
        import('@/vendor/Export2Excel').then(excel => {
        // excel表示导入的模块对象
        console.log(excel)
        excel.export_json_to_excel({
        header, // 表头 必填
        data, // 具体数据 必填
        filename: '超期工单excel', // 文件名称
        autoWidth: true, // 宽度是否自适应
        bookType: 'xlsx' // 生成的文件类型
        })
      })
      this.loading = false
    },
    // 排序函数
    setSort(arr){
      let newArr = JSON.parse(JSON.stringify(arr))
      let arr1 = []
      newArr.forEach((item,index)=>{
        let obj = {
          index: index+1,
          userName: item.userName,
          planNo: item.planNo,
          estimateYield: item.estimateYield,
          productionCountAll: item.productionCountAll,
          estimateEndTime: item.estimateEndTime,
          cause: item.cause
      }
      arr1.push(obj)
      })
      return arr1
    },
    // 搜索按钮绑定的函数，向服务器发送表单数据
    // 所有传输的表单字段都不是必须的，按需查询
    async handleFilter() {
      this.loadingList = true
      let query = Object.assign({},this.listQuery)
      let data = await getOverduePlanOrderList(query)
      if(data.code == '1'){
          this.tableInfo = data.data
      } else {
          this.$message({
              message: data.msg,
              type: 'warning'
          })
      }
      this.loadingList = false
    },
    // 使用elementui的messageBox弹框组件
    // 传入的数据是数据所在的行数以及该条目所有的信息
    hideplanNo(index,row) {
      this.$confirm('这将会隐藏该行数据，并且看板也不会展示，是否继续?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async () => {
          let res = await saveShow({planStatisticsId: row.planStatisticsId})
          if(res.code == '1'){
            this.tableInfo.splice(index, 1)
          } else {
            this.$message({
                message: res.msg,
                type: 'warning'
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消隐藏'
          })
        })
    }
  },
  // 进入页面获取table信息
  mounted() {
    this.handleFilter()
  }

}
</script>

<style>

</style>